<template>
  <div class="scene-content">
    <div id="canvas-frame" ref="canvasFrame"></div>
    <div class="box">
      {{ title }}
    </div>
    <!-- 着色器 -->
    <script type="x-shader/x-vertex" id="vertexshader">
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    </script>
    <script type="x-shader/x-fragment" id="fragmentshader">
      uniform sampler2D baseTexture;
      uniform sampler2D bloomTexture;
      varying vec2 vUv;
      void main() {
        gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
      }
    </script>
  </div>
</template>

<script>
import modules from '@/modules/index.js';
import * as THREE from 'three';

import { basicMesh } from '@/utils/common'; //
import createFn from '@/utils/create'; //
import { mapState } from 'vuex';

import {
  initGoodsStack,
  createAureole
} from '@/components/Warehouse/createTarget.js';

export default {
  name: 'index.vue',
  mounted() {
    // basicMesh(Index);
    // createFn(Index);
    this.init();
  },
  computed: {
    ...mapState('ModuleA', ['title'])
  },
  methods: {
    init() {
      const viewer = new modules.Viewer(this.$refs.canvasFrame, {
        rendererOption: {
          alpha: true,
          antialias: true
        },
        cameraOption: [
          75,
          this.$refs.canvasFrame.clientWidth /
            this.$refs.canvasFrame.clientHeight,
          0.1,
          1000
        ]
      }); // 新建 Index 类的实例
      // 性能测试
      Object.freeze(viewer);

      let skyBox = new modules.SkyBox(viewer); //添加天空盒和雾化效果
      skyBox.addSkybox(0);

      viewer.camera.position.set(17, 10, 52); //设置相机位置

      //限制controls的上下角度范围
      viewer.controls.maxPolarAngle = Math.PI / 2.1;

      let lights = new modules.Lights(viewer);
      let ambientLight = lights.addAmbientLight();
      ambientLight.setOption({ color: 0xffffff, intensity: 1 });
      lights.addDirectionalLight([100, 100, -10], {
        color: 'rgb(253,253,253)',
        intensity: 3,
        castShadow: true
      });

      let floor = new modules.Floors(viewer, 80);
      let floorMesh = floor.createPlane();

      let PathRoad = new modules.PathRoad({}, viewer, {
        x: 20,
        y: 100,
        width: 3,
        height: 30,
        type: 'lane',
        tunnelNumber: 'T1'
      });

      let roadLane = PathRoad.createLane();

      this.addModel(viewer);

      this.addGoodsStack(viewer);
    },

    addModel(viewer) {
      let path = ['SE-1.FBX', 'SE-2.FBX', 'SE-3.FBX'];
      let forkTruck = [];
      let folder = './warehouse/';
      let modelLoader = new modules.ModelLoader(viewer);

      let scaleSize = 0.003;
      let position = [0, 0.1, 0];

      modelLoader.loadModelToScene(
        folder + path[0],
        _model => {
          _model.object.name = 'truck_fork';
          _model.openCastShadow();
          _model.openReceiveShadow();
          _model.setScale(scaleSize, scaleSize, scaleSize);
          _model.setPosition(position);
        },
        progress => {
          console.log(progress);
        }
      );

      modelLoader.loadModelToScene(
        folder + path[1],
        _model => {
          _model.object.name = 'truck_arm';
          _model.openCastShadow();
          _model.openReceiveShadow();
          _model.setScale(scaleSize, scaleSize, scaleSize);
          _model.setPosition(position);
        },
        progress => {
          console.log(progress);
        }
      );

      modelLoader.loadModelToScene(
        folder + path[2],
        _model => {
          _model.object.name = 'truck_body';
          _model.openCastShadow();
          _model.openReceiveShadow();
          _model.setScale(scaleSize, scaleSize, scaleSize);
          _model.setPosition(position);
        },
        progress => {
          console.log(progress);
        }
      );
    },

    addGoodsStack(viewer) {
      viewer.scene.add(initGoodsStack([9, 6]));
    }
  },
  destroyed() {
    console.log('viewer destroyed');
  }
};
</script>

<style scoped lang="scss">
.scene-content {
  position: relative;
  width: 100%;
  height: 100%;

  #canvas-frame {
    width: 100%;
    height: 100%;
  }

  .box {
    position: absolute;
    top: 0;
    right: 50%;
    padding: 10px;
    background-color: rgba(215, 215, 215, 0.3);
  }
}
</style>
